<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:false,c:false,d:false,e:true,f:false}"></navigationRenWuShu>
        <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书结果填报</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                            <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                            <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <div style="float:right">
                        <el-button type="primary">导出</el-button>
                        <el-button type="primary">导入</el-button>
                        <el-button type="primary" v-if="zhiShow==1" @click="dingL">定量指标#</el-button>
                        <el-button type="primary" v-if="zhiShow==4" @click="dingX">定性指标#</el-button>
                        <el-button type="primary" @click="subBatch">批量填报#</el-button>
                        <el-button type="primary" @click="submitBatch">批量提交</el-button>
                    </div>
                </div>
            </div>
            <el-table
                key="1"
                ref="table"
                style="width: 100%;margin-top:20px"
                v-if="zhiShow==1"
                :data="dataList"
                border
                v-loading="dataListLoading">
                        <el-table-column type="selection"  width="55" header-align="center" align="center"></el-table-column>
                        <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                        <el-table-column
                          prop="shouyueName"
                          header-align="center"
                          align="center"
                          min-width="120"
                          label="受约人姓名">
                          <template slot-scope="scope">
                            <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                              <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                                <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                              </el-tooltip>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="shouyueZhiwu"
                          header-align="center"
                          align="center"
                          min-width="180"
                          label="受约人职务">

                          <template slot-scope="scope">
                            <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                              <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                                <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                              </el-tooltip>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="zhibiaoType" label="指标类别" min-width="120" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="zhibiaoName" label="指标名称" min-width="150" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="weight" label="权重" min-width="120" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="indexContent" label="指标内容" min-width="120" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" min-width="120" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="targetValue" label="目标值" min-width="120" header-align="center" align="center"></el-table-column>
                       
                        <el-table-column prop="dataProvider" label="数据提供部门/人" min-width="150" header-align="center" align="center">
                          <template slot-scope="scope">
                            <span v-if="scope.row.tgLx=='2'">{{scope.row.targetUserName}}</span>
                            <span v-else>{{scope.row.dataProvider}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="完成情况" width="150" prop="compleStatus"  header-align="center" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.compleStatus}}</span>
                            </template>
                        </el-table-column>
                          <el-table-column prop="zbDf" label="得分" min-width="120" header-align="center" align="center">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.zbDf" placeholder="得分" oninput ="value=value.replace(/[^0-9.]/g,'')" @change="saveWorkZbdx(scope.row)"></el-input>
                            </template>
                          </el-table-column>
                        <el-table-column label="操作" width="100"  header-align="center" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" plain v-if="scope.row.tbzbStatus<2" @click="confirmTianbao(scope.row.zbId)">提交</el-button>
                        </template>
                        </el-table-column>
            </el-table>
            <dingLiangForm  v-if="zhiShow==4" ref="tbTable" @tbTableChild="tbTableChild"></dingLiangForm>
        </div>
        <tbDialog :tbDialog='tbDialog' v-if="pltbDialogVisible" @closeDialog="closeDialog"></tbDialog>
    </basic-container>
  </div>
</template>

<script>
import {fetchListdx, delObj,saveWorkZbdx,confirmTianbaodx,submitBatch} from '@/api/hetongrenwu/gongzuorenwushu/workAssigntbsh'
import tbTableForm from '@/views/hetongrenwu/components/tianbaoTable-form.vue'
import tbDialog from '@/views/hetongrenwu/components/tianbao-dialog.vue'
import dingLiangForm from '@/views/hetongrenwu/gongzuorenwushu/renwushutb/tbsh/dingLiang-form.vue'
import { validatenull } from "@/util/validate";
export default {
 components:{
     tbTableForm,
        tbDialog,
        dingLiangForm
    },
    data(){
        return{
            dataList:[],
            dataListLoading:false,
            tbDialog:{},
            zhiShow:1,
            form:{},
            searchadvanced: true,
            searchheight: '0',
            radio:'1',
            tbSelect:[],
            idsStr:String,
            pltbDialogVisible:false
        }
    },
    watch:{
      radio(value){
        if(value){
          this.getDataList();
        }
      }
    },
    filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    created() {
      this.getDataList()
    },
    methods:{
        dingL(){
            this.zhiShow=4
            this.form={};
            this.$nextTick(()=>{
            this.$refs.tbTable.init(Object.assign(this.form,{radio:this.radio}));
          })
        },
        dingX(){
            this.zhiShow=1
            this.form={}
            this.getDataList()
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        subBatch(){
            var data=[];
           //console.log(this.zhiShow);
            if(this.zhiShow=='4'){
              data=this.tbSelect;
            }else if(this.zhiShow=='1'){
              data=this.$refs.table.selection;
            }
            if(data.length==0){
              this.$message.error("请至少选择一个指标！");
              return;
            }
            var ids=[];
            for(var i=0;i<data.length;i++){
              ids.push(data[i].zbId)
            }
            var idsStr=ids.join(',')
            this.pltbDialogVisible=true;
            this.tbDialog={
                dialogVisible:true,
                zhiShow:3,
                idsStr:idsStr
            }
        },
      // 获取数据列表
      getDataList() {
        if(this.zhiShow=='4'){
          this.$nextTick(()=>{
            this.$refs.tbTable.init(Object.assign(this.form,{radio:this.radio}));
          })
           return false
        }
        this.dataListLoading = true
        fetchListdx(Object.assign({
          type:this.radio,
          fayuename:this.form.fayueName,
          shouyuename:this.form.shouyueName,
          current: this.pageIndex,
          size: this.pageSize,
          contFillStatus:1,
          dingtype:2,
          tbzbStatus:1//结果填报-提交状态
        })).then(response => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      saveWorkZbdx(row){
        var params={
          id:row.zbId,
          zbDf:row.zbDf
        }
        saveWorkZbdx(params).then(response => {
          this.getDataList()
        })
      },
      confirmTianbao(data){
        confirmTianbaodx(data).then(response => {
          this.$message.closeAll();
          this.$message.success('提交成功')
          this.getDataList();
        })
      },
      //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      //判空
      validatenull(val){
        return validatenull(val)
      },
      tbTableChild(tbTableChild){
        if(tbTableChild){
          this.tbSelect=tbTableChild
        }

      },
      //批量提交
      submitBatch(){
        var data;
        if(this.zhiShow=='4'){
          data=this.tbSelect;
        }else if(this.zhiShow=='1'){
          data=this.$refs.table.selection;
        }
        if(data.length==0){
          this.$message.error("请至少选择一个指标！");
          return;
        }
        var ids=[];
        for(var i=0;i<data.length;i++){
          ids.push(data[i].zbId)
        }
        var idsStr=ids.join(',')
        this.$confirm('是否要提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return submitBatch({ids:idsStr})
        }).then(data => {
          this.$message.closeAll();
          this.$message.success('提交成功')
          this.getDataList()
        })
      },
      closeDialog(){
        this.pltbDialogVisible=false;
        this.getDataList();
      },
    }
}
</script>

<style>

</style>
